import { border, primaryColor } from "../utils/public.js";
class Radio extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    box-sizing: border-box;
                    margin-left: 10px;
                }
                :host(:first-child) {
                    margin-left: 0px;
                }
                #radio {
                    opacity: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin: 0;
                }
                .cp-radio {
                    margin-left: 2px;
                    cursor: inherit;
                }
                :host([disabled]) .cp-radio {
                    opacity: 0.7;
                    cursor: not-allowed;
                }
                .cp-radio-icon{
                    display: inline-block;
                    border: ${border};
                    transition: all .3s;
                    position: relative;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    line-height: 1em;
                    vertical-align: middle;
                    overflow: hidden;
                    user-select: none;
                }
                .cp-radio-icon:after {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    content: '';
                    width: 4px;
                    height: 4px;
                    border-radius: 100%;
                    background-color: rgb(255, 255, 255);
                    transform: translate(-50%,-50%) scale(0)
                }
                .cp-radio-icon__checked{
                    background-color: ${primaryColor};
                    border-color: ${primaryColor};
                    
                }
                .cp-radio-icon__checked:after{
                    transform: translate(-50%,-50%) scale(1)
                }
            </style>
            
            <label class="cp-radio" for="radio" ${this.disabled == null ? "" : "disabled"}>
                <span class="cp-radio-icon">
                    <input type="radio" id="radio" />
                </span>
                <slot>${this.label}</slot>
            </label>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$label = this._shadowRoot.querySelector(".cp-radio");
        this.$radio = this._shadowRoot.querySelector(".cp-radio-icon");
        this.$radioInput = this._shadowRoot.querySelector("#radio");
        this.$radioInput.addEventListener("click", e => {
            if (this.disabled == null) {
                const checked = this.$radioInput.getAttribute("checked");

                const name = this.name;

                if (name === null) {
                    this.setAttribute("checked", true);
                    this.$radioInput.setAttribute("checked", "");
                    this.$radio.classList.add("cp-radio-icon__checked");
                } else {
                    const siblings = this.getSiblings("cp-radio", this.name);
                    const len = siblings.length;

                    for (let i = 0; i < len; i++) {
                        siblings[i].removeAttribute("checked");
                    }

                    this.setAttribute("checked", true);
                    this.$radioInput.setAttribute("checked", "");
                    this.$radio.classList.add("cp-radio-icon__checked");
                }
            }
        });
    }

    static get observedAttributes() {
        return ["checked", "name", "value", "label", "disabled"];
    }

    get checked() {
        return this.getAttribute("checked");
    }

    set checked(value) {
        this.setAttribute("checked", value);
    }

    get disabled() {
        return this.getAttribute("disabled");
    }

    set disabled(value) {
        this.setAttribute("disabled", value);
    }

    get name() {
        return this.getAttribute("name");
    }

    set name(value) {
        this.setAttribute("name", value);
    }

    get value() {
        return this.getAttribute("value") || this.label;
    }

    set value(value) {
        this.setAttribute("value", value);
    }

    get label() {
        return this.getAttribute("label");
    }

    set label(value) {
        this.setAttribute("label", value);
    }

    /**
     * 获取所有的兄弟元素且name属性相同
     * @param {String} targetEle 元素的nodeName
     * @param {String} name 元素的name属性
     * @returns {Array} NodeList
     */
    getSiblings(targetEle, name) {
        const arr = this.parentNode.childNodes || [];
        let tmp = [];

        for (let i = 0, len = arr.length; i < len; i++) {
            if (arr[i].nodeName.toLowerCase() === targetEle && arr[i] !== this) {
                if (name) {
                    if (arr[i].name === name) {
                        tmp.push(arr[i]);
                    }
                } else {
                    tmp.push(arr[i]);
                }
            }
        }

        if (name) {
        }
        return tmp;
    }

    connectedCallback() {
        this.$row = this._shadowRoot.querySelector(".cp-row");
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render(name, newVal);
    }
    render(name, newVal) {
        if (name === "checked") {
            if (this.checked === null) {
                this.$radioInput.removeAttribute("checked");
            } else {
                this.$radioInput.setAttribute("checked", true);
            }
            this.$radio.classList.toggle("cp-radio-icon__checked");
        }
        if (name === "disabled") {
            console.log(newVal);
        }
    }
}

if (!customElements.get("cp-radio")) {
    customElements.define("cp-radio", Radio);
}
